/** @format */

@import "utils";
._searchDetail {
  .searchTip {
    margin: 10px;
    .keywords {
      color: #0c73c2;
    }
  }

  .tab {
    .single,
    .singer,
    .album,
    .video,
    .songList {
      overflow-x: hidden;
      overflow-y: scroll;
      height: calc(100vh - 250px);
      .loading {
        position: fixed;
      }
    }
    .heartIcon {
      color: #969696;
      padding: 0 8px;
      cursor: pointer;
      &:hover {
        color: #616161;
      }
    }
    .albumText {
      cursor: pointer;
      &:hover {
        color: #303031;
      }
    }

    .musicTitle {
      cursor: default;

      p {
        margin-bottom: 0;
      }

      .icon {
        margin-left: 8px;
        color: $fontColor;
        &:hover {
          color: #dc625b;
        }
      }

      .bottom {
        margin-top: 8px;
        color: #999999;
        @include ellipsis();
      }
    }

    .artists {
      display: flex;

      .split {
        margin: 0 3px;
      }
    }

    ._singerList,
    .singer,
    .album,
    .songList {
      ul {
        @include clearfix();
        .item {
          cursor: pointer;
          padding: 15px;
          @include zebra-lists(#333333, #fafafa, #333333, #f5f5f7);
          &:hover {
            background-color: #e3e3e5;
          }
          display: flex;
          align-items: center;
          .img {
            margin-right: 15px;
          }
          .listNmuber {
            padding-right: 20px;
            flex: 1;
            display: flex;
            justify-content: flex-end;
            color: #bfbfbf;
          }
          .user {
            color: #e24137;
            flex: 1;
            text-align: right;
          }
          .title {
            p {
              margin-bottom: 0;
            }
            color: #4f7daf;
            font-size: 12px;
            flex: 1;
            display: flex;
            align-items: center;
            @include ellipsis();
            .man {
              margin-left: 8px;
              color: #1379ab;
            }
            .woman {
              margin-left: 8px;
              color: #e495d3;
            }
          }
          .albumName {
            flex: 1;
            justify-content: flex-end;
            .tips {
              color: #929293;
            }
          }
          .name {
            width: 200px;
            color: #666666;
            flex: 1;
            text-align: right;
            @include ellipsis();
          }
          .alias {
            color: #999999;
          }
          .nickname {
            width: 150px;
            @include ellipsis();
            color: #bfbfbf;
          }
        }
      }
    }

    ._videoList {
      p {
        margin-bottom: 0;
      }
      .card {
        margin-bottom: 15px;
        .top {
          position: relative;

          .img {
            height: 112px;
            img {
              width: 100%;
              border-radius: 5px;
              height: 100%;
            }
          }
          .playNumber {
            position: absolute;
            right: 10px;
            top: 2px;
            display: flex;
            color: #ffffff;
            align-items: center;
            font-size: 12px;
            .icon {
              margin-right: 5px;
            }
          }
          .time {
            position: absolute;
            left: 5px;
            bottom: 0;
            color: #ffffff;
            font-size: 12px;
          }
        }

        .bottom {
          font-size: 12px;
          .content {
            display: flex;
            margin-top: 8px;
            align-items: center;
            .mv {
              width: 25px;
              height: 15px;
              border-radius: 3px;
              color: #e43f68;
              border: 1px solid #e87778;
              display: flex;
              align-items: center;
              justify-content: center;
              margin-right: 5px;
            }
            .right {
              flex: 1;
              @include ellipsis();
            }
          }
          .title {
            color: #888888;
            @include ellipsis();
          }
        }
      }
    }
  }
}
